<!-- 首页 -->
<template>
  <div class="container-index">
    <div class="warpper">
      <div>
        <!-- 头部 -->
        <div class="nav-bar">
          <div class="left" @click="onClickLeft">
          <!-- <div class="left"> -->
            <p>
              <img src="./assets/9.png" class="avater" alt slot="left">
            </p>
            <p class="user-name">
              <span>{{user.cName}}</span>
              <br>
              <span>{{user.job}}</span>
            </p>
          </div>
          <div class="title">首页</div>
          <div class="right" @click="handle">
            <img class="canmna" src="./assets/10.png" alt>
          </div>
        </div>
        <!-- 内容-->
        <div class="center">
          <!-- 8个图标-->
          <div class="icon-8">
            <div @click="$router.push({path:'/timeManagement'})">
              <p>
                <img src="./assets/1.png" class="img-size">
              </p>
              <p class="nav-name">时间管理</p>
            </div>
            <div @click="$router.push({path:'/rangeManagement'})">
              <p>
                <img src="./assets/2.png" class="img-size">
              </p>
              <p class="nav-name">范围管理</p>
            </div>
            <div @click="$router.push({path:'/modules/allPurchase'})">
              <p>
                <img src="./assets/3.png" class="img-size">
              </p>
              <p class="nav-name">采购管理</p>
            </div>
            <div @click="$router.push({path:'/CostControl'})">
              <p>
                <img src="./assets/4.png" class="img-size">
              </p>
              <p class="nav-name">成本管理</p>
            </div>
            <div @click="$router.push({path:'/quality'})">
              <p>
                <img src="./assets/5.png" class="img-size">
              </p>
              <p class="nav-name">质量管理</p>
            </div>
            <div @click="$router.push({path:'/Risk'})">
              <p>
                <img src="./assets/6.png" class="img-size">
              </p>
              <p class="nav-name">风险管理</p>
            </div>
            <div @click="$router.push({path:'/humanResources'})">
              <p>
                <img src="./assets/7.png" class="img-size">
              </p>
              <p class="nav-name">人力资源</p>
            </div>
            <div @click="$router.push({path:'/communicateDetail'})">
              <p>
                <img src="./assets/8.png" class="img-size">
              </p>
              <p class="nav-name">沟通管理</p>
            </div>
          </div>
          <!-- 消息中心-->
          <div class="message">
            <div class="message-header">
              <p>
                <img class="icon-11" src="./assets/11.png" alt>
                <span class="mess-title">消息中心</span>
              </p>
              <p @click="$router.push({path:'/myMessage'})">
                <span class="mess-title-2">查看更多</span>
                <img class="icon-11" src="./assets/12.png" alt>
              </p>
            </div>
            <ul class="message-list">
              <li v-for="mes in messageList" :key="mes.index">{{mes.Message}}</li>
            </ul>
          </div>
          <!-- 我的任务 -->
          <div class="message task">
            <div class="message-header">
                <p>
                  <img class="icon-11" src="./assets/13.png" alt>
                  <span class="mess-title">我的任务</span>
                </p>
                <p @click="$router.push({path:'/my-issue',query:{id:1}})">
                  <span class="mess-title-2">查看更多</span>
                  <img class="icon-11" src="./assets/12.png" alt>
                </p>
              </div>
              <!-- 我的发布 待接收等 -->
              <issuetab bgColor="#EEEEEE" fontColor="#262626" tabStyle="1"></issuetab>
            </div>
          </div>
        </div>
        <div style="width:100%;height:60px"></div>
        <transition name="layer-b">
          <div class="layer-bg" v-if="isShowMenu"></div>
        </transition>
        <van-actionsheet
          class="index-actionsheet"
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          @select="onSelect"
          @cancel="onCancel"
        />
        <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
      </div>
      <input @change="fileChange($event)" type="file" id="index_upload" data-id="index_upload" multiple style="display: none"/>
    </div>
</template>

<script type='textecmascript-6'>
import axios from 'axios'
import qs from 'querystring'
//混入
import interfaces from "./modules/interfaces.js";
import Camera from '@/common/Camera/Camera.js'
import upLoad from "@/common/mixins/upLoad.js";
// vuex
import { mapMutations } from "vuex";
// 组件
import issuetab from './components/issue'
export default {
  mixins: [interfaces,Camera,upLoad],
  data() {
    return {
      user:{
        cName:'',
        job:'',
      },
      messageList: [], //公告（我的消息）
      show: false,
      actions: [
        {
          id: 0,
          name: "拍照"
        },
        {
          id: 1,
          name: "从手机相册选择"
        }
      ],
      photoList:[],//图片
    };
  },
  created() {
    this.$store.commit('GET_PAGE_ACTIVE',0)
    this._initData();
  },
  computed: {
    isShowMenu() {
      return this.$store.getters.getIsShowMenu;
    }
  },
  mounted(){
    this.$store.commit('GET_PAGE_ACTIVE',0)
    /**
     * 版本检测
     */
    let currentVersion = "", //旧版本号
      newVersion = "", //新版本号
      wgtUrl = "";
      console.log('aa')
    document.addEventListener("plusready", () => {
      console.log("进入plusready");
      plus.runtime.getProperty(plus.runtime.appid, inf => {
        // wgtVer = inf.version;
        console.log("进入getProperty");
        console.log(JSON.stringify(inf));
        currentVersion = inf.version
        axios.get(`${config.URL}/api/Home/GetAPPVersionNo`).then(res=>{
          console.log(JSON.stringify(res))
          console.log(res.data.Message);
          newVersion = res.data.Message;
        console.log(currentVersion);
        console.log(newVersion)
          console.log(newVersion==currentVersion)
          if (currentVersion != newVersion) {
            console.log("版本有更新");
            plus.nativeUI.confirm(`${newVersion}`,e=> {
                if (e.index == 0) {
                  downWgt(); // 下载wgt资源包
                }
              },
              `检测到最新版本`, ["下载", "取消"]
            );
          }
        })
      });
    });

    // 下载wgt文件
    let downWgt = () => {
      plus.nativeUI.showWaiting("下载更新");
      console.warn(`${config.URL}/api/Home/GetAPPUrl`)
      axios.get(`${config.URL}/api/Home/GetAPPUrl`).then(res=>{
        console.log(JSON.stringify(res))
        if(res.data.StatusCode==200){
           wgtUrl = res.data.Message
          plus.downloader.createDownload(wgtUrl, { filename: "_doc/update/" }, (file, status) => {
                if (status == 200) {
                  console.log("下载更新成功：" + file.filename);
                  installWgt(file.filename); // 安装wgt资源包
                } else {
                  console.log("下载更新失败！");
                  plus.nativeUI.toast("下载更新失败！");
                }
                plus.nativeUI.closeWaiting();
              }
            ).start();
        }else{
          plus.nativeUI.closeWaiting();
        }
      })
    };
    // 更新应用资源
    let installWgt = path => {
      plus.nativeUI.showWaiting("安装更新");
      plus.runtime.install(path,{},() => {
          plus.nativeUI.closeWaiting();
          console.log("安装更新成功！");
          plus.nativeUI.alert("更新完成！", () => {
            //  更新完成后重启应用
            plus.runtime.restart();
          });
        },
        e => {
          plus.nativeUI.closeWaiting();
          console.log("安装更新失败！[" + e.code + "]：" + e.message);
          plus.nativeUI.toast("安装更新失败！[" + e.code + "]：" + e.message);
        }
      );
    };
  },
  
  methods: {
    _initData() {
      // 获取我的消息
      let params = {
        UserId: localStorage.getItem("userId"),
        ProjectId: localStorage.getItem("projectid"),
        page: 1,
        rows: 3
      };
      this.queryNoticeList(params).then(res=>{
        this.messageList = res.Detiel
      console.log(this.messageList)
      })
      let loginInfo = JSON.parse(localStorage.getItem('loginUserInfo'))
      this.user.cName = loginInfo.loginUserInfo.cName
      this.user.job = loginInfo.loginUserInfo.cRoleName
    },

    onClickLeft() {
      //打开侧边栏
      // this.upIsShowMenu(true);
      this.$store.commit('UPDATE_TOMEMU',new Date().getTime())
    },
    onClickRight() {
      // Toast('按钮');
    },
    ...mapMutations({
      upIsShowMenu: "IS_SHOW_MENU"
    }),
    /**
     * 点击拍照
     */
    handle() {
      this.show = true;
    },
    /**
     * 选择
     */
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      console.log(item);
      if(item.id==0){ // 拍照
        this.captureImage().then(imglist=>{
          console.log('imglist:')
          console.log(JSON.stringify(imglist))
          console.log(imglist[0].TokenUrL+imglist[0].smallPhotoURL)
          this.photoList.push(imglist[imglist.length-1])
          // this.$router.push({path:'/abarbeitung'})
          this.$store.commit('INTEGRATION_IMG_DATA', imglist[imglist.length-1])
          this.$router.push({path: '/integration'})
        })
        this.phone_show = false;
      }else if(item.id==1){ // 从相册中选择
        this.fileClick('index_upload')
        this.show = false;
      }
    },
    /**
     * 取消
     */
    onCancel() {
      console.log("取消");
    },
    
    
  },
  components:{issuetab},
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.container-index {
  width: 750px;
  height: 100%;
  overflow: auto;

  .warpper {
    width: 100%;
    height: 100%;
    overflow: auto;

    .nav-bar {
      width: 100%;
      height: 100px;
      background-color: #699FFF;
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 0;

      .left {
        display: flex;
        width: 230px;

        .user-name {
          box-sizing: border-box;
          padding: 12px 0 0 12px;

          span {
            display: inline-block;
            font-size: 28px;
            font-family: SourceHanSansCN-Regular;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 32px;
            padding-top: 5px;
            white-space: nowrap;
          }
        }

        .avater {
          width: 80px;
          height: 80px;
          display: inline-block;
          padding: 12px 0 0 20px;
        }
      }

      .title {
        flex: 1;
        text-align: center;
        font-size: 36px;
        font-family: SourceHanSansCN-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 100px;
      }

      .right {
        width: 230px;

        .canmna {
          width: 40px;
          height: 30px;
          float: right;
          padding: 30px 20px;
        }
      }
    }

    .center {
      margin-top: 100px;
      .icon-8 {
        box-sizing: border-box;
        box-shadow: 0px 2px 8px 0px rgba(220, 226, 237, 1);
        padding: 0 20px;
        width: 100%;
        height: 412px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 20px;

        >div {
          width: 160px;
          padding-top: 30px;

          p {
            text-align: center;

            .img-size {
              width: 100px;
              height: 100px;
              background: linear-gradient(180deg, rgba(255, 201, 141, 1) 0%, rgba(253, 179, 61, 1) 100%);
              border-radius: 36px;
            }
          }

          .nav-name {
            font-size: 28px;
            font-family: SourceHanSansCN-Regular;
            font-weight: 400;
            color: rgba(34, 40, 51, 1);
            line-height: 42px;
            margin-top: 10px;
          }
        }
      }
    }

    .message {
      margin: 20px 0 0 0;
      height 320px

      .message-header {
        height: 80px;
        width: 100%;
        display: flex;
        background-color: white;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;

        p {
          line-height: 80px;

          img {
            vertical-align: middle;
          }

          .mess-title, .mess-title-2 {
            font-family: SourceHanSansCN-Medium;
            line-height: 32px;
            vertical-align: middle;
            margin-left: 16px;
          }

          .mess-title {
            color: rgba(38, 38, 38, 1);
            font-size: 32px;
            font-weight: 500;
          }

          .mess-title-2 {
            color: #5A92FF;
            font-weight: 400;
            font-size: 28px;
            margin-right: 6px;
          }
        }
      }

      .message-list {
        width: 100%;
        background-color: white;
        box-sizing: border-box;
        padding: 0 20px;
        box-shadow: 0px 2px 8px 0px rgba(220, 226, 237, 1);

        li {
          height: 80px;
          border-bottom: 1px solid #E5E5E5;
          line-height: 80px;
          font-size: 30px;
          font-family: SourceHanSansCN-Medium;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .task{
      height: auto;
    }
    .layer-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2999;
      background-color: black;
      opacity: 0.3;
    }
  }
}

.container-index {
  width: 750px;
  overflow: hidden;

  .warpper {
    width: 100%;
    height: 100%;

    .layer-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2999;
      background-color: black;
      opacity: 0.3;
    }
  }
}
</style>
<style>
.layer-b-enter,
.layer-b-leave-to {
  opacity: 0 !important;
}
.layer-b-enter-active,
.layer-b-leave-active {
  transition: opacity 0.1s;
}
.layer-b-enter-to,
.layer-b-leave {
  opacity: 0.3;
}
</style>
<style>
.icon-11 {
  width: 35px;
  height: 31px;
}
.el-loading-mask{
  z-index: 100;
}
.index-actionsheet.van-popup.van-popup--bottom.van-actionsheet{
  /* left: 72%; */
  position: absolute;
}
</style>

